<template>
    <uni-notice-bar  style="text-align: center;" text="审批中可撤回重新登记" single color="#FF5F00" background-color="#FFEEDD" />

    <view>
        <view class="beijing">
            <view v-for="(item,index) in users" >
                <view class="view">
                    <text class="title">留校原因</text>
                    <text style="color: red;">*</text><br>
                    <text class="txt">{{item.reason}}</text>
                </view>
                <view class="view">
                    <text class="title">计划留校开始时间</text>
                    <text style="color: red;">*</text><br>
                    <text class="txt">{{item.begintime}}</text>
                </view>
                <view class="view">
                    <text class="title" >计划留校结束时间</text>
                    <text style="color: red;">*</text><br>
                    <text class="txt">{{item.endtime}}</text>
                </view>
                <view class="view">
                    <text class="title">家庭联系人姓名</text>
                    <text style="color: red;">*</text><br>
                    <text class="txt">{{item.name}}</text>
                </view>
                <view class="view">
                    <text class="title">家庭联系人电话</text>
                    <text style="color: red;">*</text><br>
                    <text class="txt">{{item.tel}}</text>
                </view>
                <view class="view">
                    <text class="title">是否需要校内住宿*</text>
                    <text style="color: red;">*</text><br>
                    <text class="txt">{{item.opt}}</text>
                </view>
            </view>
        </view>

        <view style="margin-left: 12px;">
        	<uni-collapse>
        		<uni-collapse-item  title="审批流程" open="true">
        			<view>
        				<text>

						<timeline>
							<timelineItem leftTime='' color="#D4D4D4">
								<view class="tripItem">
									<uni-row>
										<uni-col span="4">
											<view class="ava" style="background-color: #FFD4D4;">
												<text class="ava-txt" style="color: #FE7575;">张</text>
											</view>
										</uni-col>
										<uni-col span="20">
											<view class="title">发起人(学生)</view>
											<view class="tips">张婉悠 <view style="color: #797979; margin-left: 100px;">已发起</view></view>

										</uni-col>
									</uni-row>
								</view>
							</timelineItem>
							<timelineItem leftTime='' color="#90B8FF" innercolor='#006DFF'>

								<view class="tripItem" style="height: 100px;">
									<uni-row>
										<uni-col span="4">
											<view class="ava" style="background-color: #E2E6FF;">
												<text class="ava-txt" style="color: #6A7CE3;">王</text>
											</view>
										</uni-col>
										<uni-col span="20">
											<view class="title">审批人(导师)</view>
											<view class="tips">王小明 <view style="color: #CB000E; margin-left: 100px;">审批不通过</view></view>
											<view style="margin-top: 15px; color: #797979;">备注：去年就没有回家，今年回家吧</view>
										</uni-col>
									</uni-row>
								</view>
							</timelineItem>
							<timelineItem leftTime='' color="#D4D4D4">
								<view class="tripItem">
									<uni-row>
										<uni-col span="4">
											<view class="ava" style="background-color: #FFD4D4;">
												<text class="ava-txt" style="color: #FE7575;">张</text>
											</view>
										</uni-col>
										<uni-col span="20">
											<view class="title">发起人(学生)</view>
											<view class="tips">张婉悠 <view style="color: #797979; margin-left: 100px;">已发起</view></view>

										</uni-col>
									</uni-row>
								</view>

							</timelineItem>
							<timelineItem leftTime='' color="#D4D4D4">

								<view class="tripItem">
									<uni-row>
										<uni-col span="4">
											<view class="ava" style="background-color: #E2E6FF;">
												<text class="ava-txt" style="color: #6A7CE3;">王</text>
											</view>
										</uni-col>
										<uni-col span="20">
											<view class="title">审批人(导师)</view>
											<view class="tips">王小明 <view style="color: #00832B; margin-left: 100px;">审批通过</view></view>
										</uni-col>
									</uni-row>
								</view>
							</timelineItem>
							<timelineItem leftTime='' color="#D4D4D4">
								<view class="tripItem">
									<uni-row>
										<uni-col span="4">
											<view class="ava" style="background-color: #FFEAC2;">
												<text class="ava-txt" style="color: #F8852C;">周</text>
											</view>
										</uni-col>
										<uni-col span="20">
											<view class="title">审批人(辅导员)</view>
											<view class="tips">周一围 <view style="color: #00832B; margin-left: 100px;">审批通过</view></view>
										</uni-col>
									</uni-row>
								</view>
							</timelineItem>
							<timelineItem leftTime='' color="#D4D4D4">
								<view class="tripItem">
									<uni-row>
										<uni-col span="4">
											<view class="ava" style="background-color: #E2E6FF;">
												<text class="ava-txt" style="color: #6A7CE3;">王</text>
											</view>
										</uni-col>
										<uni-col span="20">
											<view class="title">审批人(副书记/副院长)</view>
											<view class="tips">王小明 <view style="color: #00832B; margin-left: 100px;">审批通过</view></view>
										</uni-col>
									</uni-row>
								</view>
							</timelineItem>
            </timeline>
						</text>
					</view>
				</uni-collapse-item>
			</uni-collapse>
		</view>
        <view>
					<button class="bu"  @click="took1()">
						<text class="zi">
							离校申请
						</text>
					</button>
				</view>

    </view>
</template>

<script setup>
import UniNoticeBar from "../../uni_modules/uni-notice-bar/components/uni-notice-bar/uni-notice-bar.vue";
import timeline from '../../components/chenbin-timeline/timeLine.vue'
import timelineItem from '../../components/chenbin-timeline/timelineItem.vue'
import { ref } from 'vue';
// export default {
//     name: "pass.vue",
//     components: {UniNoticeBar}
// }
let users = ref([{
    "reason" :"今年不回家",
    "begintime" : "2024年1月2日 08:30:00",
    "endtime":"2024年1月25日 08:30:00",
    "name" :"张梅林",
    "tel" : "15567899900",
    "opt":"不需要"
}])
let took1=function (){
    uni.navigateTo({
        url:'/pages/index/ok1'
    })
}
</script>

<style scoped>
.beijing{
    width: 100%;
    height: 356px;
    background: #FFFFFF;
    border-radius: 4px;
    margin: 12px;
    padding: 12px;
}
.txt{
    width: 60px;
    height: 17px;
    font-family: PingFangSC-Regular;
    font-weight: 400;
    font-size: 12px;
    color: #797979;

}
.view{
    margin-bottom: 18px;
}
.title{
    width: 180px;
    height: 20px;
    font-family: PingFangSC-Medium;
    font-weight: 500;
    font-size: 14px;
    color: #171717;
    text-align: left;
}
.tripItem {
    height:80px;
    padding: 20rpx 30rpx;
    box-sizing: border-box;
    background:rgba(255,255,255,1);
    box-shadow:0px 0px 20px 0px rgba(0,0,0,0.08);
    border-radius:10px;
    margin-bottom: 0rpx;

}
.tripItem .title {
    font-size: 14px;
    font-family:PingFangSC-Medium,PingFang SC;
    font-weight:500;
    color:rgba(51,51,51,1);
}
.tripItem .tips {
    /* font-size:22rpx;
    font-family:PingFangSC-Regular,PingFang SC;
    font-weight:400;
    color:rgba(153,153,153,1);
    margin-top: 20rpx; */
    color: #000000e6;
    font-size: 14px;
    font-face: PingFangSC;
    font-weight: 400;
    line-height: 0;
    letter-spacing: 0;
    paragraph-spacing: 0;
    text-align: left;
    margin-top: 26px;
}
.ava{
    width: 32px;
    height: 32px;
    border-radius: 50%;
    text-align: center;

}
.ava-txt{
    width: 16px;
    height: 22px;
    font-family: PingFangSC-Regular;
    font-weight: 400;
    font-size: 16px;

    line-height: 32px;
}
.bu{
	display: block;
	text-align: center;
	line-height: 40px;
	width: 95%;
	height: 40px;
	background-image: linear-gradient(90deg, #6CA9FF 0%, #166AFF 100%);
	border-radius: 4px;
	margin-left: 12px;
}
.zi{
	width: 60px;
	height: 20px;
	font-family: PingFangSC-Medium;
	font-weight: 500;
	font-size: 15px;
	color: #FFFFFF;
}
</style>